<template>
  <div class="tabConBox" ref="TableHeight"
    :style="{ height: onresizeHeight + 'px' ,overflow: 'auto'}">
    <div>
      <div class="tab" :style="{ height: '100%', width: tabWidthAll + 'px' }">
        <div v-for="(item, index) in unitDTOS" :key="index"
          :style="{ height: '100%', width: item.widthAll + 'px' }">
          <model-table v-if="item.isShowTable" @roomSelChange='roomSelChange' :item='item'
            :unitDTOS='unitDTOS' :productType='productType' :isImported='isImported'
            :isControl='isControl' />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import modelTable from './modelTable'
  export default {
    name: 'houseRoom',
    components: { modelTable },
    // 房间数据 、 产品类型、是否导入过数据、
    props: ['propUnitDTOS', 'productType', 'isImported', 'isControl'],
    data() {
      return {
        onresizeHeight: '',
        roomEditVOS: [],
        tabWidthAll: 0,
        unitDTOS: [],
        lastScroll: 0, //记录上一次的滚动位置
        timer: '', //定时器
      }
    },
    watch: {
      propUnitDTOS(newVal) {
        this.unitDTOS = newVal
        let tabConBox = document.querySelector('.tabConBox')
        let clientTabWidth = document.querySelector('.tabConBox').offsetWidth
        this.tabWidthAll = 0
        this.unitDTOS.forEach((item, index) => {
          //计算每个单元的宽度(每个房间宽度+楼层宽度 默认宽度110)
          item.widthAll = item.colsData.length > 0 ? (item.colsData.length * 110) + 120 :
            200
          //计算每个单元的起始位置
          item.startCoord = index == 0 ? 0 : this.unitDTOS[index - 1].endCoord
          item.endCoord = index == 0 ? this.unitDTOS[index].widthAll : this.unitDTOS[
            index - 1].endCoord + item.widthAll
          this.tabWidthAll += parseInt(item.widthAll)
          if (tabConBox.scrollLeft == 0) {
            if (item.startCoord <= clientTabWidth) {
              item.isShowTable = true
            } else {
              item.isShowTable = false
            }
          }
        })

        console.log(this.tabWidthAll, this.unitDTOS, '数据=======')
      },
      productType(newVal) {
        this.productType = newVal
      },

      isImported(newVal) {
        this.isImported = newVal
      },
    },

    mounted() {
      let tabConBox = document.querySelector('.tabConBox')
      let that = this
      tabConBox.addEventListener("scroll", (e) => {
        let scrollLeft = e.target.scrollLeft
        clearTimeout(this.timer)
        this.timer = null;
        this.lastScroll = scrollLeft;
        //开始滑动
        this.timer = setTimeout(() => {
          if (this.lastScroll == scrollLeft) {
            //停止滑动
            that.tabConBoxScroll(e)
          }
        }, 100)
      });
      // this.getPlateTreeData()
      setTimeout(() => {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      }, 200)
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.offsetTop - 50
          }, 10)
          that.tabConBoxScroll()
        })()
      }
    },
    methods: {
      changeScrollLeft() {
        let tabConBox = document.querySelector('.tabConBox')
        tabConBox.scrollLeft = 0
        this.unitDTOS = []
      },
      tabConBoxScroll(e) {
        let clientTabWidth = document.querySelector('.tabConBox').offsetWidth
        let scrollLeft = e.target.scrollLeft
        this.unitDTOS.forEach((item, index) => {
          if (item.endCoord <= scrollLeft && item.startCoord <
            scrollLeft && item.isShowTable) {
            item.isShowTable = false
            this.$set(this.unitDTOS, this.unitDTOS[index], item)
            this.$forceUpdate()
            console.log('前 ）））消失', index, scrollLeft)
          }
          if (item.endCoord >= scrollLeft && item.startCoord <= clientTabWidth +
            scrollLeft && !item.isShowTable) {
            item.isShowTable = true
            this.$set(this.unitDTOS, this.unitDTOS[index], item)
            this.$forceUpdate()
            console.log('后===显示', index, scrollLeft)
          }

          if ((item.startCoord - scrollLeft <= clientTabWidth) && item.startCoord >
            scrollLeft && !item.isShowTable) {
            item.isShowTable = true
            this.$set(this.unitDTOS, this.unitDTOS[index], item)
            this.$forceUpdate()
            console.log('前 ^^^显示', index, scrollLeft)

          }
          if (item.startCoord - scrollLeft >= clientTabWidth && item.startCoord >
            clientTabWidth && item.isShowTable) {
            item.isShowTable = false
            this.$set(this.unitDTOS, this.unitDTOS[index], item)
            this.$forceUpdate()
            console.log('后 &&&消失', index, scrollLeft)
          }
        })

      },
      delFloor(unitId, floorId) {
        this.$parent.delFloor(unitId, floorId)
      },
      // poptit 删除单元
      delUnitName(unitId) {
        this.$parent.delUnitName(unitId)
      },
      updataUnitNameClick(val) {
        this.$parent.updataUnitNameClick(val)
      },
      roomSelChange(val) {
        this.$emit('roomSelChange', val)
      },
      connectorFormat(val) {
        if (val == '1') {
          return ''
        } else if (val == '2') {
          return '-'
        } else if (val == '3') {
          return '#'
        } else {
          return ' '
        }
      },
    },
    created() {
      this.$nextTick(function() {
        console.log(this.$refs.TableHeight.offsetTop, 'this.$refs.TableHeight')
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.offsetTop - 50
      })
    },
  }
</script>
<style lang='scss' scoped>
  .tabConBox {
    width: 100%;
    // overflow: hidden;
  }

  .tab {
    padding: 0 20px 0 0;
    display: flex;
    flex-direction: row;
    // padding: 20px;
    width: 100%;
    overflow-x: auto;


  }
</style>
<style>
  .popperClass .ivu-poptip-inner {
    background: rgba(235, 247, 255, 1) !important;
  }
</style>